<template>
    <view>
        <me-tabs v-model="tabIndex" :tabs="tabs" :fixed="true" :tab-width="130"></me-tabs>
        <swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
            <swiper-item v-for="(tab, index) in tabs" :key="index">
                <mescroll-item ref="mescrollItem" :i="index" :index="tabIndex" :tabs="tabs">
                </mescroll-item>
            </swiper-item>
        </swiper>
<!--        <u-button @click="goToLogin" text="登录"></u-button> -->
    </view>
</template>

<script>
	import MescrollItem from './mescroll-swiper-item.vue'
    export default {
        data() {
            return {
                tabIndex: 0, // 默认选中的tab索引
                height: '800rpx', // swiper的高度
                tabs: [] // 存储类别菜单数据
            }
        },
		components:{
			MescrollItem
		},
        onLoad() {
            this.getCatgoryMenu(); // 在页面加载时获取类别菜单数据
        },
        methods: {
            async getCatgoryMenu(){
                let res = await uniCloud.callFunction({
                    name:"category",
                    data:{type:'get'}
                })
                this.tabs = res.result.data; // 将获取的数据存储在tabs变量中
            },
			
            swiperChange(event) {
                // 当swiper切换时的处理函数
                this.tabIndex = event.detail.current;
            },
            goToLogin() {
                // 使用uni.navigateTo跳转到登录页，保留当前页面
                uni.navigateTo({
                    url: '/pages/login/login'
                });
            }
        }
    }
</script>

<style>
    /* 在这里添加您的样式 */
</style>